import React from 'react';
import './CustomerComments.scss';
import Stars from '@/components/Stars';

function CustomerComments() {
  const commentList = [
    {
      name: 'Shopping Zone',
      stars: 5,
      role: 'my-company Retailer',
      comment:
        '“I am impressed with the variety of products on offer, their website is easy to navigate, and their willingness to make it easy for their customers is applaudable. Their support is second to none.”',
    },
    {
      name: 'Cozzy Customs',
      stars: 5,
      role: 'my-company Retailer',
      comment:
        "“We always have an amazing experience with my-company. The sales ordering is super easy, and we've experienced nothing short of exceptional after sales support.”",
    },
    {
      name: 'Paul Heyworth',
      stars: 5,
      role: 'my-company Retailer',
      comment:
        '“Top notch customer service, high quality products and great after market care. They have always helped both drive sales and look after any issues. Highly recommend for any venture into dropshipping.”',
    },
    {
      name: 'Lizzy Peeler',
      stars: 5,
      role: 'my-company Retailer',
      comment:
        "“my-company have the most amazing range of quality products. They make set up and inventory management so easy. Plus they provide the most exceptional customer service. I've been blown away!”",
    },
  ];

  return (
    <div className="customer-comments main-width">
      <div className="content-width">
        <div className="customer-comments-hd mb40">
          <h6 className="overline-title floor-title-font">
            other customers making ship happen
          </h6>
        </div>
        <div className="customer-comments-bd">
          <div className="comment-list flex-row">
            {commentList.map((comment, index) => (
              <div className="comment" key={index}>
                <div className="comment-stars">
                  <Stars num={comment.stars} />
                </div>
                <div className="comment-body">
                  <p>{comment.comment}</p>
                </div>
                <div className="comment-footer flex-row items-center">
                  <div className="comment-avatar">
                    {comment.name
                      .split(/\s+/)
                      .slice(0, 2)
                      .map(w => w[0])
                      .join('')}
                  </div>
                  <div className="comment-user">
                    <h6 className="comment-name theme-color">{comment.name}</h6>
                    <h6 className="comment-role">{comment.role}</h6>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default CustomerComments;
